<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->

<div class="record-facility-data" ng-controller="RecordFacilityDataController">
    <div class="row-fluid facility-heading">
        <div class="span5" ng-show="facilitySelected">
      <span id="facilityStatus"
            ng-class="distribution.facilityDistributions[facilitySelected.facilityId].computeStatus()">
        <div id="facilityIndicator" class="status-icon pull-left position-fixing"></div>
      </span>

            <h2>
                <span id='healthCenterLabel' openlmis-message="label.coverage.health.center"></span>
                <span>:</span>
                <span id='facilitySelected' openlmis-message="facilitySelected.facilityName"></span>
            </h2>
        </div>

        <div class="span5" id="noFacilitySelected" ng-show="!facilitySelected">
            <h2 id="noFacilitySelectedMessage" openlmis-message="message.no.facility.selected"></h2>
        </div>
        <div id="legend" class="pull-right distribution-legend">
      <span class="is-empty">
        <span id="notStartedLegendIcon" class="status-icon"></span>
        <span id="notStartedLegendLabel" openlmis-message="label.distribution.legend.not.started"></span>
      </span>
      <span class="is-incomplete">
        <span id="partialLegendIcon" class="status-icon"></span>
        <span id="partialLegendLabel" openlmis-message="label.distribution.legend.partial.complete"></span>
      </span>
      <span class="is-complete">
        <span id="completedLegendIcon" class="status-icon"></span>
        <span id="completedLegendLabel" openlmis-message="label.distribution.legend.not.complete"></span>
      </span>
      <span class="is-synced">
        <span id="syncedLegendIcon" class="status-icon"></span>
        <span id="syncedLegendLabel" openlmis-message="label.distribution.legend.synchronized"></span>
      </span>
      <span class="is-duplicate">
        <span id="cannotSyncLegendIcon" class="status-icon"></span>
        <span id="cannotSyncLegendLabel" openlmis-message="label.distribution.legend.cannot.synchronize"></span>
      </span>
        </div>
    </div>
    <div class="info-box">
        <div class="row-fluid">
            <div class="span3 facility-change-dropdown">
                <select ui-select2="{formatResult: format}" openlmis-message="label" id="selectFacility"
                        ng-model="facilitySelected.facilityId"
                        ng-change="chooseFacility()">
                    <option value=""></option>
                    <optgroup ng-repeat="zone in geographicZones" label="{{ zone }}">
                        <option ng-repeat="facility in zoneFacilityMap[zone] | orderBy: 'facilityName'"
                                value="{{ facility.facilityId }}"
                                ng-class="distribution.facilityDistributions[facility.id].computeStatus()">
                            {{ facility.facilityCode }} - {{ facility.facilityName }}
                        </option>
                    </optgroup>
                </select>
            </div>

            <div class="span3 offset1 info-box-labels">
                <strong openlmis-message="label.delivery.zone"> </strong> :&nbsp;<span
                    ng-bind="distribution.deliveryZone.name"></span>
            </div>
            <div class="span3 info-box-labels">
                <strong openlmis-message="label.program"></strong> :&nbsp;<span
                    ng-bind="distribution.program.name"></span>
            </div>
            <div class="span2 info-box-labels">
                <strong openlmis-message="label.period"> </strong> :&nbsp;<span
                    ng-bind="distribution.period.name"></span>
            </div>
        </div>
    </div>
</div>